import React, { useEffect, useState } from "react";
import { Cell } from "react-vant";
import { Flex, List } from "react-vant";
import style from "./home1.module.css";
import { Tabs } from "react-vant";
import { PullRefresh, Loading } from 'react-vant';
import { newsort, presslist } from "../../service/homeService";
import "./style.less";
export default function NewList({ newList }) {
  let [mainNew, setMainNew] = useState([]);
  let arr = mainNew.length > 0 && mainNew.map((item) => item.id);
  let [newPressList, setNewPressList] = useState([]);

  useEffect(() => {
    (async () => {
      let { data } = await newsort();
      // console.log(data.data, "111111111111111111");
      setMainNew([...data.data]);
      let { data: list } = await presslist({ type: 0 });
      console.log(list, "分类的新闻详情");
      setNewPressList([...list.rows]);
      btn1();
    })();
  }, []);
  useEffect(() => {
    console.log(mainNew, "11111111111111111");
    console.log(arr, "我是数组");
  }, [mainNew, arr]);
  let btn1 = async (id) => {
    console.log(id);
    let { data: list } = await presslist({ type: id });
    console.log(list, "分类的新闻详情");
    setNewPressList([...list.rows]);
  };

  const [finished, setFinished] = useState(false)//加载的部分


  // 当第一次加载时，没有点击事件，所以就没有渲染数据。。所以来一次初始化渲染。
  let onRefresh = () => {
    console.log(999);

  }

  return (



    <div style={{ marginTop: "15px" }}>
      <div className="demo-tabs">
        {mainNew.length > 0 &&
          ( //空数组为真。
            <Tabs
              defaultActive={0}
              onClickTab={(e) => {
                console.log();
                btn1(arr[e.index]);
              }}
            >
              {/* 这里加刷新的 */}

              {mainNew?.map((item) => (
                <Tabs.TabPane key={item.id} title={`${item.name}`}>

                  {newPressList.length === 0 ?
                    <div style={{
                      display: "flex",
                      justifyContent: "center",
                      marginTop: "20px"
                    }}>
                      <Loading type="ball" />
                    </div>
                    : newPressList.map((item) => {
                      return (
                        // <PullRefresh onRefresh={onRefresh}>
                        <Cell key={item.id}>
                          <Flex justify="center" align="center" gutter={16}>
                            <Flex.Item span={15}>
                              <div className={style.title}>{item.title}</div>
                              <div className={style.header}>
                                <div>
                                  {item.updateTime.slice(0, 10)}&nbsp;&nbsp;&nbsp;
                                </div>
                                <div>
                                  {item.commentNum}
                                  评论&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                </div>
                                <div>8天前</div>
                              </div>
                            </Flex.Item>
                            <Flex.Item span={9}>
                              <img
                                src={"/api" + item.cover}
                                className={style.img}
                              ></img>
                            </Flex.Item>
                          </Flex>
                        </Cell>
                        // </PullRefresh>
                      );
                    })}
                </Tabs.TabPane>
              ))}

            </Tabs>
          )}
      </div>
    </div>
  );
}
